<template>
  <div class="news-wrap">
    <el-button type="primary" size="mini" @click="openAddNews">
      添加新闻 </el-button><br><br>
    <el-table :data="tableData" border>
      <el-table-column label="新闻位置" width="100">
        {{ name }}
      </el-table-column>
      <el-table-column label="新闻标题" prop="newsTitle" />
      <el-table-column label="发布时间">
        <template slot-scope="scope">
          {{ scope.row.createTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="warning" @click="goToEdit(scope.row)">
            编辑内容
          </el-button>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不了"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这个新闻吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              slot="reference"
              size="mini"
              style="margin-left:10px"
              type="danger"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="编辑新闻"
      :visible.sync="editDialog"
      width="1200px"
      :close-on-click-modal="false"
    >
      <el-form>
        <el-form-item label="新闻标题" label-width="80px">
          <el-input v-model="currentEdit.newsTitle" size="mini" />
        </el-form-item>
        <el-form-item label="新闻封面" label-width="80px">
          <div class="img-box">
            <el-image
              :src="currentEdit.news"
              style="width: 100px; height: 100px"
              fit="cover"
            />
            <simpleCropper :ratio="1" :img.sync="currentEdit.news">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              >点击上传</el-button>
            </simpleCropper>
          </div>
        </el-form-item>
        <el-form-item>
          <vue-editor v-model="currentEdit.newsContext" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editDialog = false">取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加新闻"
      :visible.sync="addNewsVisible"
      width="1200px"
      :close-on-click-modal="false"
    >
      <el-form label-width="80px">
        <el-form-item label="新闻标题">
          <el-input v-model="addModel.newsTitle" size="mini" />
        </el-form-item>
        <el-form-item label="新闻封面" label-width="80px">
          <div class="img-box">
            <el-image
              :src="addModel.news"
              style="width: 100px; height: 100px"
              fit="cover"
            />
            <simpleCropper :ratio="1" :img.sync="addModel.news">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
              >点击上传</el-button>
            </simpleCropper>
          </div>
        </el-form-item>
        <el-form-item label="文章编辑">
          <vue-editor v-model="addModel.newsContext" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addNewsVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import simpleCropper from '@/components/SimpleCropper'
import VueEditor from '@/components/VueEditor'
export default {
  components: {
    simpleCropper,
    VueEditor
  },
  props: {
    id: {
      type: Number,
      default: Number
    },
    name: {
      type: String,
      default: String
    }
  },
  data() {
    return {
      editDialog: false,
      addNewsVisible: false,
      currentEdit: {},
      tableData: [],
      addModel: {
        newsTitle: '',
        newsContext: '',
        // 封面
        news: ''
      }
    }
  },
  mounted() {
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      const { data } = await this.$http.getNewsList({ id: this.id })
      this.tableData = data.list
    },
    async handleDelete(id) {
      await this.$http.deleteNewsList({ id })
      this.$message.success('删除成功')
      this.getNewsList()
    },
    goToEdit(row) {
      this.currentEdit = row
      console.log(this.currentEdit)
      this.editDialog = true
    },
    async handleEdit() {
      await this.$http.setNewsList(this.currentEdit)
      this.$message.success('修改成功')
      this.getNewsList()
      this.editDialog = false
    },
    async confirm() {
      await this.$http.addNewsList({
        newsTitle: this.addModel.newsTitle,
        newsContext: this.addModel.newsContext,
        type: this.id
      })
      this.$message.success('添加新闻成功')
      this.getNewsList()
      this.addNewsVisible = false
    },
    // 添加新闻
    openAddNews() {
      this.addModel = {
        newsTitle: '',
        newsContext: '',
        news: '',
        type: ''
      }
      this.addNewsVisible = true
      this.$nextTick(() => {
        this.$refs.addRef.setContent()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 5vh !important;
}
::v-deep .el-dialog__body {
  max-height: 80vh !important;
  overflow-y: auto;
}
</style>
